/**
 * 需求: 封装一个组件, 最后渲染结果是一个按钮
 * 组件名称: Button
 * 使用示例: <Button>点击抽奖</Button>
 * 组件标签的属性: 
 * * type
 *    *  primary 蓝色
 *    *  danger  红色
 * * disabled
 *    * true  则按钮不可点
 *    * false 则按钮可点
 * * loading
 *    * true  则显示 loading 的小图标, 表明加载中的状态
 *    * false 则不显示 loading 小图标
 * 
 */

import React, { Component } from 'react'
import './button.css';
//导入 gif 图片
import loadingGif from './loading.gif';

export default class Button extends Component {
  render() {
    //输出 props 属性
    console.log(this.props);
    return (
      <button 
        className={this.props.type}
        disabled={this.props.disabled}
        //绑定事件
        onClick={this.props.onClick}
        >
          {this.props.loading && <img width="15" src={loadingGif} alt="" />}
          {this.props.children}
        </button>
    )
  }
}
